.personal-fm {
    width: 100%;
    max-width: 1200px;
    padding: 10px 50px 0;

    :global {
        .title {
            border-bottom: 1px solid #ccc;
            color: #888;
            text-align: center;
            font-size: 20px;
            font-weight: 600;
            margin-top: 20px;
        }

        .music-box {
            width: 300px;
            height: 380px;
            margin: 60px auto 0;
            box-shadow: 0 0 2px #333;
        }

        .image {
            height: 300px;
            width: 300px;

            &>img {
                height: 100%;
                width: 100%;
            }
        }

        .song {
            display: block;
            color: #000;
            margin-left: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 80%;

            &:hover {
                text-decoration: underline;
            }
        }

        .progress-container {
            --time: "-00:00";
            display: flex;
            align-items: center;

            &::after {
                padding: 0 10px;
                content: var(--time);
            }
        }

        .progress {
            --progress: 0%;
            width: 100%;
            height: 4px;
            background-color: #666;
            border-radius: 2px;
            margin-left: 5px;
            cursor: pointer;

            &:after {
                width: var(--progress);
                display: block;
                height: 100%;
                border-radius: 2px;
                background-color: #c62f2f;
                content: "";
            }
        }

        .btn-container {
            display: flex;
            justify-content: flex-end;
            position: relative;
            padding-right: 5px;
        }

        .icon {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 30px;
            width: 30px;
            color: #666;
            border-color: #666;
            cursor: pointer;

            &:hover {
                color: #c62f2f;
                border-color: #c62f2f;
            }

            &:nth-of-type(1),
            &:nth-of-type(4) {
                font-size: 18px;
                border: 2px solid;
                border-radius: 15px;
            }

            &:nth-of-type(2),
            &:nth-of-type(3) {
                font-size: 28px;
            }


            &:nth-of-type(1) {
                position: absolute;
                left: 5px;
            }

            &:nth-of-type(3) {
                margin: 0 20px;
            }
        }
    }
}